import QtQuick 2.9

import QtQuick.Controls 1.4
import QtQuick.Layouts 1.3

Rectangle {
    border.width: 1
    height: 20

    property var hour: Qt.formatDateTime(new Date(), "hh")
    property var minute: Qt.formatDateTime(new Date(), "mm")
    property var second: Qt.formatDateTime(new Date(), "ss")
    //1 hour; 2 minute; 3second
    property var focusInput: 1

    TextInput {
        id: hourInput
        z: 6
        anchors.left: parent.left
        anchors.leftMargin: 4
        //        anchors.top: parent.top
        //        anchors.bottom: parent.bottom
        anchors.verticalCenter: parent.verticalCenter
        width: 12
        //        Layout.alignment: Qt.AlignVCenter
        selectByMouse: false
        text: hour
        //        visible: focusInput == 1 ? false : true
        //        validator: IntValidator {
        //            bottom: 0
        //            top: 23
        //        }
        validator: RegExpValidator {
            regExp: /\d{1,3}/
        }
        onTextChanged: {
            console.log("hour text:" + text)
            text = checkMaxTime(text, 23)
            spinbox.value = parseInt(text)
        }
        onActiveFocusChanged: {
            if (activeFocus) {
                focusInput = 1
                spinbox.value = parseInt(text)
                selectAll()
            }
        }

        Keys.onPressed: {
            console.log(Qt.Key_Down + " hour onPressed " + event.key)

            if (event.key == Qt.Key_Left) {
                focusInput = 3
                spinbox.value = second
                return
            } else if (event.key == Qt.Key_Right) {
                focusInput = 2
                spinbox.value = minute
                return
            }

            var nT = parseInt(text)
            if (event.key == Qt.Key_Down)
                nT--
            else if (event.key == Qt.Key_Up)
                nT++

            hour = stringTime(checkMaxTime(nT, 23))
            console.log(" hour " + hour)
        }
    }
    Text {
        id: hmT
        text: ":"
        anchors.left: hourInput.right
        anchors.leftMargin: 2
        anchors.verticalCenter: parent.verticalCenter
        width: 7
        z: 2
    }
    TextInput {
        id: minInput
        z: 3
        //        anchors.top: parent.top
        //        anchors.bottom: parent.bottom
        anchors.verticalCenter: parent.verticalCenter
        anchors.left: hmT.right
        width: 12
        selectByMouse: true
        //            mouseSelectionMode: TextInput.SelectWords
        text: minute
        //        visible: focusInput == 2 ? false : true
        //        validator: IntValidator {
        //            bottom: 0
        //            top: 59
        //        }
        validator: RegExpValidator {
            regExp: /\d{1,3}/
        }
        onTextChanged: {
            console.log("min text:" + text)
            text = formatEidtSM(text)
            spinbox.value = parseInt(text)
        }

        onActiveFocusChanged: {
            if (activeFocus) {
                focusInput = 2
                spinbox.value = parseInt(text)
                selectAll()
            }
        }
        Keys.onPressed: {
            console.log(Qt.Key_Down + " minute onPressed " + event.key)
            if (event.key === Qt.Key_Left) {
                focusInput = 1
                spinbox.value = hour
                return
            } else if (event.key === Qt.Key_Right) {
                focusInput = 3
                spinbox.value = second
                return
            }

            var nT = parseInt(text)
            if (event.key === Qt.Key_Down)
                nT--
            else if (event.key === Qt.Key_Up)
                nT++

            nT = checkMaxTime(nT, 59)
            minute = stringTime(nT)

            spinbox.value = nT
            console.log(" minute " + minute)
        }
    }
    Text {
        id: msT
        text: ":"
        anchors.left: minInput.right
        anchors.leftMargin: 2
        anchors.verticalCenter: parent.verticalCenter
        width: 7
        z: 4
    }
    TextInput {
        id: secondInput
        z: 5
        anchors.left: msT.right
        width: 12
        //        anchors.right: parent.right
        //        anchors.rightMargin: 15
        //        anchors.top: parent.top
        //        anchors.bottom: parent.bottom
        anchors.verticalCenter: parent.verticalCenter
        selectByMouse: true
        text: second
        //        visible: focusInput == 3 ? false : true
        //        validator: IntValidator {
        //            bottom: 0
        //            top: 59
        //        }
        validator: RegExpValidator {
            regExp: /\d{1,3}/
        }
        onTextChanged: {
            text = formatEidtSM(text)
            spinbox.value = parseInt(text)
        }

        onActiveFocusChanged: {
            if (activeFocus) {
                focusInput = 3
                spinbox.value = second
                selectAll()
            }
        }

        Keys.onPressed: {
            if (event.key === Qt.Key_Left) {
                focusInput = 2
                spinbox.value = minute
                return
            } else if (event.key === Qt.Key_Right) {
                focusInput = 1
                spinbox.value = hour
                return
            }

            var nT = parseInt(text)
            if (event.key === Qt.Key_Down)
                nT--
            else if (event.key === Qt.Key_Up)
                nT++

            nT = checkMaxTime(nT, 59)
            second = stringTime(nT)

            spinbox.value = parseInt(nT)
            console.log(" second " + second)
        }
    }
    //    }
    Rectangle {
        id: blank
        z: 1
        anchors.left: parent.left
        anchors.leftMargin: 2
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.topMargin: 3
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 3
        anchors.rightMargin: 17
        //        color: "red"
    }

    SpinBox {
        id: spinbox
        z: 0
        width: 22
        anchors.left: parent.left
        //        anchors.leftMargin: focusInput == 1 ? 4 : (focusInput == 2 ? 21 : 38)
        //        anchors.left: focusInput == 1 ? hourInput.left : (focusInput == 2 ? minInput.left : (focusInput == 3 ? secondInput.left : secondInput.right))
        anchors.right: parent.right
        activeFocusOnPress: false
        value: hourInput.text
        minimumValue: -1
        maximumValue: 60
        //        horizontalAlignment: Qt.AlignRight
        //        selectByMouse: false
        onValueChanged: {
            if (focusInput == 1) {
                value = checkMaxTime(value, 23)
                hourInput.text = value
            } else if (focusInput == 2) {
                value = checkMaxTime(value, 59)
                minInput.text = stringTime(value)
            } else if (focusInput == 3) {
                value = checkMaxTime(value, 59)
                secondInput.text = stringTime(value)
            }
        }
    }

    function checkMaxTime(time, max) {
        var t = time
        if (time === max + 1)
            t = 0
        else if (time < 0)
            t = max
        else if (time > max + 1) {
            if (time % 100 <= max)
                t = time % 100
            else
                t = time % 10
        }

        return t
    }

    function stringTime(time) {
        return ("00" + time).substr(-2)
    }

    function formatEidtSM(t) {
        var realValue = parseInt(t)
        var correctValue = checkMaxTime(realValue, 59)
        return stringTime(correctValue)
        //        return ("00" + correctValue).substr(-2)
    }

    function getTimeStr() {
        return hourInput.text + minInput.text + secondInput.text
    }
}
